<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <h1>Button组件测试</h1>
        <hr>
        <!--默认按钮-->
        <h2>默认按钮</h2>
        <el-button>默认按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <hr>
        <h2>朴素按钮</h2>
        <el-button>默认按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <hr>
        <h2>圆角按钮</h2>
        <el-button round>普通按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <hr>
        <h2>图标按钮</h2>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="danger" loading icon="el-icon-delete" circle></el-button>
        <hr>
        <h2>按钮禁用</h2>
        <el-button size="mini" type="danger" icon="el-icon-delete" circle disabled></el-button>

        <hr>
        <h2>文字按钮</h2>
        <el-button type="text">文字按钮</el-button>
        <el-button type="text" disabled>文字按钮</el-button>

    </div>
</body>
<!--挂载Vue-->
<script>
    new Vue({
        el: '#app',
        data:{
            visible:false
        }
    })
</script>
</html>